<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户订单展示</title>
<link rel="stylesheet" type="text/css" href="${path}/static/common/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${path}/static/common/layui/css/layui.css"/>
</head>
<body>
	<%-- <a class="btn btn-primary" href="${path}/student/getStudentInsertPage.action">添加</a> --%>
	<hr>
	<p style = " font-family:'楷体';">该页面是前台用户下的订单，后台是不可以自行添加和修改的，但可以查看订单详情和删除订单</p>
	
	<table id="tableId" lay-filter="tableFilter"></table>
	
	<script src="${path}/static/common/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
	<script src="${path}/static/common/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
	<script src="${path}/static/common/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	
	<script type="text/html" id="statusTpl">
		{{#		if(d.status == 0) {				}}
					已取消
		{{#	    } else if (d.status == 10) {     }}
					未付款
		{{#	    } else if (d.status == 20) {		}}
					已付款
		{{#	    } else if (d.status == 40) {		}}
					已发货
		{{#	    } else if (d.status == 50) {		}}
					交易成功
		{{#	    } else if (d.status == 60) {		}}
					交易关闭
		{{#     }								}}
	</script>
	<script type="text/html" id="paymentTypeTpl">
		{{#		if(d.paymentType == 1) {				}}
					在线支付
		{{#	    } else if (d.paymentType == 0) {     }}
					其他
		{{#     }								}}
	</script>
	
	<script type="text/html" id="mainImageTpl">
		<img src="{{d.mainImageFullUrl}}"/>
	</script>
	
	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="orderItem">订单详情</a>
	</script>
	<script type="text/html" id="barDemo1">
  		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	
	<script type="text/html" id="toolbarDemo">
       <div class="layui-btn-container">
           <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
      </div>
    </script>
	
		<script type="text/javascript">
		// layui包含很多模块，不会都去加载，而是使用哪个模块就去加载哪个模块
		layui.use('table', function(){
		    var table = layui.table;
		  
		    //使用table去渲染表格
			table.render({
			    elem: '#tableId' // 执行要渲染的table的id
			    ,height: 470
			    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
			    ,url: '${path}/orderShow/selectByPage.action' //数据接口
			    ,page: true //开启分页
			    ,cols: [[ //表头
			      {type: 'checkbox', fixed: 'left'}
			      ,{field: 'id', title: 'ID', width:60,sort: true}
			      ,{field: 'orderNo', title: '订单号',width:140}
			      ,{ field:'username', title : '用户名称'} 
			      ,{field: 'payment', title: '实付金额',width:80}
			      ,{field: 'paymentType', title: '支付类型',width:80, templet: "#paymentTypeTpl"}
			      ,{field: 'postage', title: '运费',width:80}
			      ,{field: 'status', title: '订单状态',width:80, templet: "#statusTpl"}
			      ,{field: 'paymentTime', title: '支付时间',width:90,templet:"<div>{{!d.paymentTime?'未知':layui.util.toDateString(d.paymentTime, 'yyyy-MM-dd')}}</div>"}
			      ,{field: 'sendTime', title: '发货时间',width:90,templet:"<div>{{!d.sendTime?'未知':layui.util.toDateString(d.sendTime, 'yyyy-MM-dd')}}</div>"}
			      ,{field: 'createTime', title: '创建时间', width:90,templet:"<div>{{!d.createTime?'未知':layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}</div>"}
			      ,{field: 'updateTime', title: '更新时间', width:90,templet:"<div>{{!d.updateTime?'未知':layui.util.toDateString(d.updateTime, 'yyyy-MM-dd')}}</div>"}
			      ,{title:'订单详情', toolbar: '#barDemo'}
			      ,{title:'删除', toolbar: '#barDemo1'}
			    ]]
				,id: 'tableReload'
			});
		    
			//头工具栏事件
			table.on('toolbar(tableFilter)', function(obj){
			    var checkStatus = table.checkStatus(obj.config.id);
			    switch(obj.event){
			      case 'deleteAll':
			    	  // [{{id: 26, categoryId: 100002, name: "Apple iPhone"},{id: 27, categoryId: 100006, name: "Midea/美的"}]
			          var data = checkStatus.data;
			    	  console.log(data);
			    	  var idArray = []; // [1,2,4]
			    	  for(var i in data) {// i是数组data的下标
			    	  	idArray.push(data[i].id);
			    	  }
			    	  var ids = idArray.join(","); // "1,2,4"
			    	 
			    	  var orderNoArray = []; // [1,2,4]
			    	  for(var i in data) {// i是数组data的下标
			    		  orderNoArray.push(data[i].orderNo);
			    	  }
			    	  var orderNos = orderNoArray.join(","); // "1,2,4"
			    	  layer.confirm('真的删除行么', function(index){
			          	$.post(
			          		"${path}/orderShow/deleteAll.action",
			          		{"ids" : ids,"orderNos" : orderNos},
			          		function(result) {
			          			if(result.success) {
			          				mylayer.successMsg(result.msg);
			          				//重新加载表格数据
			          			    table.reload('tableReload');
			          			} else {
			          				mylayer.errorMsg(result.msg);
			          			}
			          			
			          			//layer.close(index);
			          		},
			          		"json"
			          	);
			          });
			      break;
			      //自定义头工具栏右侧图标 - 提示
			      case 'LAYTABLE_TIPS':
			        layer.alert('这是工具栏右侧自定义的一个图标按钮');
			      break;
			    };
			});
		    
			//监听右侧的toolbar的点击事件
			table.on('tool(tableFilter)', function(obj){
			    var data = obj.data;
			    var id = data.id;
			    var orderNo = data.orderNo;
			    console.log("orderNo = " + orderNo);
			    console.log(id);
			    console.log(data.id);
			    console.log(obj)
			    if(obj.event === 'del'){
			        layer.confirm('真的删除行么', function(index){
			        	$.post(
			        		"${path}/orderShow/deleteById.action",
			        		{"id" : data.id,
			        		 "orderNo": data.orderNo	
			        		},
			        		
			        		function(result) {
			        			if(result.success) {
			        				mylayer.successMsg(result.msg);
			        				//重新加载表格数据
			        			    table.reload('tableReload');
			        			} else {
			        				mylayer.errorMsg(result.msg);
			        			}
			        			
			        			//layer.close(index);
			        		},
			        		"json"
			        	);
			        });
			    } else if(obj.event === 'orderItem'){
			    			layer.open({
				 				type : 2,
				 				tile : "订单详情",
				 				area : ["1000px", "650px"],
				 				content : "${path}/orderShow/getOrderItemPage.action?orderNo="+orderNo+""
				 			});
			    	}	
			    	
			});
		  
		  
			var $ = layui.$, active = {
			    reload: function(){
			      //执行重载
			      table.reload('tableReload', {
			        page: {
			          curr: 1 //重新从第 1 页开始
			        }
			        ,where: {// /product/selectByPage.action?page=1&limit=10&id=26&name=Apple&price=9991
			          id: $("#searchId").val(),
			          name: $("#searchName").val(),
			          stock: $("#searchStock").val()
			        }
			      }, 'data');
			    }
			  };
			  
			  $('.demoTable .layui-btn').on('click', function(){
			    var type = $(this).data('type');
			    active[type] ? active[type].call(this) : '';
			  });
		});
		
		function insert() {
			layer.open({
				type : 2,
				tile : "添加",
				area : ["1000px", "650px"],
				content : "${path}/user/getInsertUserPage.action"
			});
		}
	</script>
	
	
</body>
</html>